<template>
    <div>
      <el-main>
        <div style="display: flex; justify-content: space-between; align-items: center;">
          <h2 style="margin-right: 10px;">{{ customerName }}：{{ customerId }}
            <i class="fa fa-copy"  style="cursor: pointer; margin-left: 10px;"></i>
          </h2>
          <div style="display: flex; justify-content: flex-end; align-items: center;">
            <el-button type="primary" class="solid-button" style="margin-right: 10px;"
             @click="handleBack">返回</el-button>
          </div>
        </div>
        <el-divider>
        </el-divider>
  
        <!-- 详细信息部分 -->
        <div style="margin-top: 20px; display: flex;">
          <!-- 轮播图部分 -->
          <!-- <div style="width: 30%; margin-right: 20px;">
            <el-carousel :interval="3000" arrow="always" height="300px">
              <el-carousel-item v-for="(image, index) in images" :key="index">
                <img :src="image" alt="carousel image" style="width: 100%; height: 100%; object-fit: cover;">
              </el-carousel-item>
            </el-carousel>
          </div>
   -->
          <!-- 详细信息部分 -->
          <div style="width: 100%; ">
            <el-row :gutter="24">
              <el-col :span="20" style="margin-left: 20px;">
                <el-row :gutter="20">
                  <el-col :span="10">
                    <span class="info">所属行业:</span>
                    <span class="" style="color: red;">{{ industry }}</span>
                  </el-col>
                  <el-col :span="10">
                    <span class="info">客户来源:</span>
                    <span class="info-value" style="color: red;">{{ contactPerson }}</span>
                  </el-col>
                </el-row>
  
                <el-row :gutter="20">
                  <el-col :span="8">
                    <span class="info">联系人</span>
                    <span class="info-value">{{ contactPerson }}</span>
                  </el-col>
                  <!-- <el-col :span="8">
                    <span class="info">联系电话</span>
                    <span class="info-value">{{ contactPhone }}</span>
                  </el-col> -->
                  
                  <el-col :span="8">
                    <span class="info">电子邮箱</span>
                    <span class="info-value">
                      {{ email }}
                    </span>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="8">
                    <span class="info">销售部门</span>
                    <span class="info-value">{{ salesDepartment }}</span>
                  </el-col>
                  <el-col :span="8">
                    <span class="info">进货负责人</span>
                    <span class="info-value">{{salesPersonId}}</span>
                  </el-col>
                  <el-col :span="8">
                    <span class="info">客户地址</span>
                    <span class="info-value">{{ customerAddress }}</span>
                  </el-col>
                  <!-- <el-col :span="8">
                  <span class="info">状态</span>
                  <span class="info-value" :style="{ color:status=== '0' ? 'green' : 'red'}">{{ status === '0' ? '启用' : '停用' }}</span>
                </el-col> -->
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="8">
                    <span class="info">备注</span>
                    <span class="info-value">
                      {{ notes }}
                    </span>
                  </el-col>
                 <!-- <el-col :span="8">
                    <span class="info">创建人</span>
                    <span class="info-value">
                      {{ shelfLifeDays }} {{ manager }}
                    </span>
                  </el-col>
                   <el-col :span="8">
                    <span class="info">创建人时间</span>
                    <span class="info-value">{{ createdAt }}</span>
                  </el-col>
                </el-row>
               <el-row :gutter="20">
                <el-col :span="8">
                    <span class="info">更新人</span>
                    <span class="info-value">{{ manager }}</span>
                  </el-col> -->
              </el-row>
              </el-col>
            </el-row>
            <el-footer>
              <el-divider></el-divider>
              <el-row :gutter="20">
                <el-col :span="4">
                  <span class="info">创建人</span>
                  <span class="info-value" style="min-width: 50px;">{{ createPersonId }}</span>
                </el-col>
                <el-col :span="8">
                  <span class="info">创建时间</span>
                  <span class="info-value">{{ createTime }}</span>
                </el-col>
                <el-col :span="4">
                  <span class="info">更新人</span>
                  <span class="info-value" style="min-width: 50px;">{{ createPersonId }}</span>
                </el-col>
                <el-col :span="8">
                  <span class="info">更新时间</span>
                  <span class="info-value">{{ updateTime }}</span>
                </el-col>
              </el-row>
            </el-footer>
          </div>
        </div>
      </el-main>
    </div>
  </template>
  
  <script>
   import {selectCustomers} from "@/api/customers/customers";
  
    export default {
      name: "Detail",
      data() {
        return {
          // 数据初始化
        id: '',
        customerId: '',
        customerName: '',
        industry: '',
        source: '',
        contactPerson: '',
        email: '',
        salesDepartment: '',
        salesPersonId: '',
        customerAddress: '',
        notes: '',
        createPersonId: '',
        createTime: '',
        updatePersonId: '',
        updateTime: '',
        isDeleted: '',
        status: ''
        // pyAccount: {
        // accountName: null,
        // taxId: null,
        // accountAddress: null,
        // bankAccount: null,
        // accountOpeningAddress: null,
        // sourceUnit: null
        // },
    };
  },
      created() {
        this.fetchData();
      },
    methods: {
      fetchData() {
        // 获取 URL 参数
        const id = this.$route.query.id;
        // 调用接口获取数据
        selectCustomers(id).then(response => {
          console.log(response);
          console.log(response.image)
          // 将数据赋值给组件的属性
          this.customerName= response.customerName;
               this.id =response.id;
               this.customerId =response.customerId;
               this.supplierCode =response.supplierCode;
               this.industry =response.industry;
               this.source =response.source;
               this.contactPerson =response.contactPerson;
               this.email =response.email;
               this.salesDepartment =response.salesDepartment;
               this.salesPersonId =response.salesPersonId;
               this.customerAddress =response.customerAddress;
               this.notes =response.notes;
               this.status =response.status;
               this.createPersonId =response.createPersonId;
               this.createTime =response.createTime;
               this.updateTime =response.updateTime;
            //    this.pyAccount.sourceUnit =response.pyAccountList[0].sourceUnit;
            //    this.pyAccount.accountId =response.pyAccountList[0].accountId;
            //    this.pyAccount.accountName =response.pyAccountList[0].accountName;
            //    this.pyAccount.remarks = response.pyAccountList[0].remarks;
            //    this.pyAccount.taxId =response.pyAccountList[0].taxId;
            //    this.pyAccount.accountOpeningAddress =response.pyAccountList[0].accountOpeningAddress;
            //    this.pyAccount.sourceUnit =response.pyAccountList[0].sourceUnit;
            //    this.pyAccount.bankAccount =response.pyAccountList[0].bankAccount;
            //    this.pyAccount.accountAddress =response.pyAccountList[0].accountAddress;
  
            // if (response.image != null && response.image != '') {
            //   // 将 response.image字段拆分为图片路径数组
            //   this.images = response.image.split(',');
            // } else {
            //   //给定一张默认图片
            //   this.images = ['http://127.0.0.1:9300/statics/2024/11/27/照片2_20241127165610A002.jpg'];
            // }
  
            // //保质期单位判断
            // if (response.shelfLifeUnit == 0) {
            //   this.shelfLifeUnit = '年';
            // }else if(response.shelfLifeUnit == 1){
            //   this.shelfLifeUnit = '月';
            // } else {
            //   this.shelfLifeUnit = '日';
            // }
  
        //   //保质期是否开启判断
        //     if (response.isEnable == 1) {
        //       this.isEnable = '开启';
        //     }else {
        //       this.isEnable = '关闭';
        //     }
        });
      },
    //    copyProductCode() {
    //       const text = this.productCode;
    //       navigator.clipboard.writeText(text).then(() => {
    //         Message.success('复制成功！');
    //       }).catch(err => {
    //         Message.error('复制失败！');
    //       });
    //     },
    //  copyProductCode() {
    //     const el = document.createElement('textarea');
    //     el.value = this.productCode;
    //     document.body.appendChild(el);
    //     el.select();
    //     document.execCommand('copy');
    //     document.body.removeChild(el);
  
    //     this.$message.success('产品编号已复制到剪贴板');
    //   },
    //    copyItemCode() {
    //       const text = this.productCode;
    //       navigator.clipboard.writeText(text).then(() => {
    //         Message.success('复制成功！');
    //       }).catch(err => {
    //         Message.error('复制失败！');
    //       });
    //     },
  
    //   toggleStatus() {
    //     const productId = this.$route.params.productId;
    //     const newState = this.productStatus === '1' ? '0' : '1';
    //     this.productStatus = newState
    //     event.preventDefault(); // 阻止默认的焦点行为
  
    //     const item = {
    //       productId: productId,
    //       productStatus: newState
    //     }
    //   },
      /** 返回到上一个页面 */
        handleBack() {
          this.$router.push('/unit/suppliers');
          this.$router.go(-1);
        },
    },
    filters: {
        formatPrice(value) {
          if (!value) return '0.00';
          return parseFloat(value).toFixed(2);
  
        },
      },
    };
  </script>
  
  <style>
    
  
    .solid-button {
      background-color: #ffffff;
      color: #000000;
      border: 1px solid #a4a4a4;
    }
  
    ::v-deep .el-table-fixed {
      height: 0px;
    }
  
  
    .el-main {
      color: #333;
      margin: 1%;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    }
  
    .el-row {
      margin-top: 20px;
    }
  
    .info {
      font-weight: bold;
      /* 使文字加粗 */
      color: #333;
      /* 文字颜色 */
      margin-right: 30px;
      /* 文字与后续内容的间距 */
    }
  
    .el-divider--horizontal {
      height: 2px;
    }
  
    .info-value {
      color: #999999;
      display: inline-block;
      min-width: 150px;
      /* 根据需要调整 */
    }
  </style>
  